<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todolist</title>
    <link rel="stylesheet" href="scss/app.css">
    <script src="js/mitt.umd.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script>
	<script src="https://unpkg.com/@vueuse/shared"></script>
	<script src="https://unpkg.com/@vueuse/core"></script>
</head>
<body>
<div class="root">
    <todo-head></todo-head>
    <div class="part">
        <unfinish></unfinish>
        <finish></finish>
    </div>
</div>
<!-- 209010238薛本莲 -->
<template id="todo-head">
    <div class="todo-head">
        <div class="section">
            <span>ToDoList</span>
            <p class="submitP">
                <input type="text" placeholder="添加代办事项" ref="willdo">
                <button @click="addTodo">确定</button>
            </p>
			<span class="skin" @click='changeSkin()'><img src="images/皮肤1.png"></span>
        </div>
    </div>
</template>
<template id="unfinish">
    <div class="unfinish">
        <div class="unfinishTitle">{{obj.unFns}}</div>
        <div class="unfinishList">
            <ul class="unfinishUL">
                <li v-for="(item,index) in obj.list" style="display: flex; align-items: center;">
                    <input type="checkbox" class="choic"  @change="checkChange($event,index)">
                    <div class="ListWord">{{item}}</div>
					<img src="images/删除.png" class="delet" @click='removeData($event,index)'>
                </li>
            </ul>
        </div>
    </div>
</template>
<template id="finish">
    <div class="finish">
        <div class="unfinishTitle">{{obj.hasFns}}</div>
        <div class="unfinishList">
            <ul class="unfinishUL">
                <li v-for="(item,index) in obj.list" style="display: flex; align-items: center;"><!-- checked -->
                    <input type="checkbox" class="choic" checked @change="finishChange($event,index)">
                    <div class="ListWord">{{item}}</div>
					<img src="images/删除.png" class="delet" @click='removeData($event,index)'>
                </li>
            </ul>
        </div>
    </div>
</template>
<!-- 209010238薛本莲 -->
<script>
    const emitter = window.mitt();
    const {ref,reactive,onMounted,watch} = Vue;
    const vm=Vue.createApp({});
    vm.component('todo-head',{
        setup() {
            let todoThing ;
            const willdo = ref(null);
            const addTodo=()=>{
                todoThing = willdo.value.value;
                emitter.emit('todoData', todoThing)
            };
			const {useDark,useToggle}=VueUse;
			const isDark = useDark({
			  selector: 'body',
			  attribute: 'class',
			  valueDark: 'dark',
			  valueLight: 'light',
			});
			const changeSkin = useToggle(isDark);
            return{
                willdo,
                addTodo,
				changeSkin
            };
        },
        template:`#todo-head`,
    });
    // 未完成
    vm.component('unfinish',{
       setup(){
           let obj=reactive({
               list:[
                   '吃饭',
                   '拿快递',
                   'gris',
               ],
               unFns:"未完成",
               unList:[],
               finList:[],
           });
           const checkChange=(e,index)=>{
                let allList = obj.list;
                obj.unList.push(obj.list[index]);
                allList.splice(index,1);
                e.target.checked = false;
                emitter.emit('undoData', obj.unList);
           };
		   const removeData=(e,index)=>{
			   obj.list.splice(index,1);
		   }
           onMounted(() => {
               emitter.on('todoData',(data)=>{
                   obj.list = obj.list.concat(data);
               })
               emitter.on('errdoData',(data)=>{
                   console.log(data);
                   obj.list = obj.list.concat(data);
               })
           })
           return{
               obj,
               checkChange,
			   removeData
           }
       },
        template:`#unfinish`
    })
    //已完成
    vm.component('finish',{
        setup(){
            let obj=reactive({
                list:[
					
                ],
                hasFns:"已完成",
                // errList:[],
            });
			const removeData=(e,index)=>{
				obj.list.splice(index,1);
			};
            const finishChange = (e,index)=>{
                console.log(obj.list[index])
                emitter.emit('errdoData', obj.list[index]);
                obj.list.splice(index,1);
                e.target.checked = true;
            };
            onMounted(() => {
                emitter.on('undoData',(data)=>{
                    obj.list =data;
                })
            })
            return{
                obj,
				removeData,
                finishChange
            }
        },
        template:`#finish`
    })
    vm.mount('.root');
</script>
</body>
</html>